<template>
  <div>
    <div class="header">
        <img class="game_icon" :src="list.gameicon" alt="">
        <div class="game_info">
          <h3>{{list.gamename}}</h3>
          <div class="client_size">
            <span>{{list.client_size}}M</span> | 
            <span>{{list.genre_str}}</span>
          </div>
        </div>
        <van-button round class="download_btn">下载</van-button>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Object,
      default() {
        return {}
      }
    },
  },
}
</script>

<style lang="less" scoped>
.header {
  box-sizing: border-box;
  width: 10rem;
  height: 2.533333rem;  
  padding: .533333rem .4rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img {
    display: inline-block;
    width: 1.466667rem;
    height: 1.466667rem;
    margin-right: .266667rem;
  }
  .game_info {
    flex: 1;
    height: 1.466667rem;
    h3 {
      font-size: .453333rem;
      color: #222;
      font-weight: bold;
      margin: 0;
      line-height: .933333rem;
    }
    .client_size {
      font-size: .32rem;
      color: #999;
      font-weight: 500;
      line-height: .533333rem;
    }
  }
  .download_btn {
    width: 1.466667rem;
    height: 1.466667rem;
    border-radius: 50%;
    border: .026667rem solid #ff5543;
    padding: 0;
    color: #ff5543;
  }
}
</style>